'use client'
import { useSearchParams } from 'next/navigation'
import Tag from './tag'
import { usePathname } from 'next/navigation'
import { useRouter } from 'next-nprogress-bar'

interface FilterMobileProps {
  selected: string
  categories: NewsCategory[]
}

const FilterMobile: React.FC<FilterMobileProps> = (props) => {
  const { selected, categories } = props
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const router = useRouter()

  const handleTapCategory = (id: string) => {
    const params = new URLSearchParams(searchParams)
    params.set('category', id)
    router.replace(`${pathname}?${params.toString()}`, { scroll: false })
  }
  return (
    <div className='flex items-center overflow-x-scroll space-x-3 lg:hidden'>
      {categories.map((category) => {
        return (
          <Tag
            id={category.id.toString()}
            key={category.id}
            isSelected={selected === category.id.toString()}
            onClick={handleTapCategory}
          >
            {category.title}
          </Tag>
        )
      })}
    </div>
  )
}

export default FilterMobile
